<template>            
  <div>
    <div v-for="item in data" ref="chartDiv" style="width: 100%; height: 300px;margin: 20px "></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import {last24hStat} from "@/api/api";

  export default {
    name: 'dashboard',
    data() {
      return {
        data: [],
        charts: []
      };
    },
    created() {
      this.getStatInfo()
    },
    mounted() {
      // this.initCarts()
    },
    methods: {
      getStatInfo: function () {
        last24hStat().then(res => {
          this.data = res.data
        }).then(()=>{
          this.initCarts()
        })
      },
      initCarts: function () {
        for (let index in this.data) {
          let d = this.data[index]
          let chart = echarts.init(this.$refs.chartDiv[index]);
          chart.setOption({
            title: {text: d.name},
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              name: '时间',
              type: 'category',
              data: d.hour
            },
            yAxis: {
              name: '次数',
              type: 'value'
            },
            series: [{
              name: d.name,
              data: d.count,
              type: 'line',
              smooth: true,
            }]
          })
          this.charts.push(chart)
        }
      }
    }
  };
</script>
